<template>
	<view class="u-margin-left-20 u-margin-right-20">
		<!-- 楼盘图片轮播 -->
		<view>
			<u-swiper :list="swiperlist" :height="500" mode="number" effect3d effect3d-previous-margin=""
				:interval="5000" @click="clickImg"></u-swiper>
		</view>

		<!-- body -->
		<view class="body_count">

			<!-- 内容1 -->
			<view class="count_box1">
				<view class="box1_title">
					<text>{{room.villageName}} {{room.type == 4 ? '新房':'租房'}}</text>
				</view>

				<view class="box1_detail">
					<view class="detail_item">
						<view>
							<text class="font1">{{room.price}} <text class="font2">元</text></text>
						</view>
						<view style="margin-top: 8rpx;">
							<text class="font3">押一付一</text>
						</view>
					</view>

					<view class="detail_item">
						<view>
							<text class="font1">3室2厅2卫 </text>
						</view>
						<view style="margin-top: 8rpx;">
							<text class="font3">户型</text>
						</view>
					</view>

					<view class="detail_item">
						<view>
							<text class="font1">m²</text>
						</view>
						<view style="margin-top: 8rpx;">
							<text class="font3">建筑面积</text>
						</view>
					</view>
				</view>

				<view class="box1_icon">
					<view class="icon_item" v-for="(item,index) in tagList">
						<text>{{item.title}}</text>
					</view>

				</view>
			</view>

			<!-- 内容2 -->
			<view class="count_box1 count_box2">
				<view class="box2_title">
					<text>房源介绍</text>
				</view>

				<view class="box2_list">
					<view class="msg">
						<view class="font1">
							<text class="">房屋状态</text>
						</view>
						<view class="font2">
							<text class="">{{room.introduce}}</text>
						</view>
					</view>

					<view class="msg">
						<view class="font1">
							<text class="">建筑年份</text>
						</view>
						<view class="font2">
							<text class="">{{room.year}}</text>
						</view>
					</view>

					<view class="msg">
						<view class="font1">
							<text class="">建筑类型</text>
						</view>
						<view class="font2">
							<text class="">{{room.type}}</text>
						</view>
					</view>

					<view class="msg">
						<view class="font1">
							<text class="">绿化率</text>
						</view>
						<view class="font2">
							<text class="">{{room.green}}%</text>
						</view>
					</view>

					<view class="msg">
						<view class="font1">
							<text class="">地址</text>
						</view>
						<view class="font2">
							<text class="">{{room.address}}</text>
						</view>
					</view>



				</view>

			</view>

			<!-- 内容3 -->
			<view class="count_box1 count_box2">
				<view class="box2_title">
					<text>{{room.villageName}}-地址</text>
				</view>

				<map :latitude="latitude" :longitude="longitude" style="margin-top: 24rpx;">
					<cover-view style='width:100%;height:100%;' @click="clickMap"></cover-view>
				</map>
			</view>

			<!-- 内容4 -->
			<view class="count_box1 count_box2">
				<view class="box2_title">
					<text>服务介绍</text>
				</view>

				<view class="box2_list">

					<u-cell-group :border="false">
						<u-cell-item icon="heart" style="padding: 16rpx 0;" title="承诺-四大租住承诺，安心有保障" :arrow="false"
							hover-class="none" :border-bottom="false"></u-cell-item>
						<u-cell-item icon="level" style="padding: 16rpx 0;" title="品质-两类品质保障，入住更无忧" :arrow="false"
							hover-class="none" :border-bottom="false"></u-cell-item>
						<u-cell-item icon="star" style="padding: 16rpx 0;" title="服务-两项日常服务，生活超便捷" :arrow="false"
							hover-class="none" :border-bottom="false"></u-cell-item>
						<u-cell-item icon="rmb" style="padding: 16rpx 0;" title="付款-多种付款方式，支付更灵活" :arrow="false"
							hover-class="none" :border-bottom="false"></u-cell-item>
					</u-cell-group>

				</view>

			</view>

			<!-- 内容4 -->
			<view class="count_box1 count_box2">
				<view class="box2_title">
					<text>房源评价</text>
				</view>

				<view class="box2_list">
					<view class="u-padding-top-50 u-padding-bottom-50" >
						<u-cell-group :border="false">
							{{evaluate}}
							<text style="position: absolute; right: 16rpx; color: #909399;font-size: 13px;">{{credt}}</text>
						</u-cell-group>
					</view>
					<view  style="padding-top: 30rpx;">
						<u-icon name="chat-fill"></u-icon>
						<text @click="moreEval"
							style="text-align: center;font-size: 12px;margin-left: 5rpx;">更多评价（{{evalsize}}）</text>
					</view>
				</view>

			</view>

			<!-- 内容6 -->
			<view class="count_box1 count_box2">
				<view class="box2_title">
					<text></text>
				</view>

				<!-- 联系信息  -->
				<view class="store-info" style="position: relative;">
					<view class="logo">
						<u-image width="120rpx" mode="aspectFit" height="120rpx" :src="clerk.agentLogo"></u-image>
					</view>
					<view class="name-star star-con">
						<div class="name">
							<span class="shopTag">{{clerk.storeName}}</span>
						</div>
						<div class="store-row">
							<div class="collectionNum">{{clerk.clerkName}}</div>
							<div class="goodsNum">{{clerk.workingYear}}-{{clerk.agentLevel}}-{{clerk.serviceCount}}
							</div>
						</div>
					</view>
					<view class="to-store-btn">
						<u-icon name="chat-fill" color="#409EFF" size="40" @click="openChat(clerk.memberId)"></u-icon>
						<u-icon name="phone" color="#409EFF" size="40" @click="clickItem(clerk.mobile)"></u-icon>

					</view>
				</view>
			</view>


			<!--猜你喜欢-->
			<view class="title2">— 猜你喜欢 —</view>
			
			<fangTemplate style="width: 100%; padding-bottom: 10rpx;"  :res='flowList' :storeName='false' />

			<!-- 底部导航 -->
			<view class="navigation">
				<view class="left">
					<button type="default" open-type="contact" class="clearBtn" style="font-size: 14px;color: #6a6a6a;">
						<view class="item" @click="goToIm(building)">
							<u-icon name="server-fill" :size="40"></u-icon>
							<view class="text">客服</view>
						</view>
					</button>
					<view class="item" @click="heartHouse">
						<u-icon size="30" :color="favorite ? '#f2270c' : '#262626'"
							:name="favorite ? 'heart-fill' : 'heart'"></u-icon>
						<view :style="{ color: favorite ? '#f2270c' : '#262626' }">{{
		              favorite? "已收藏": "收藏"
		            }}</view>
					</view>
					<button type="default" open-type="share" class="clearBtn" style="font-size: 14px;color: #6a6a6a;">
						<view class="item">
							<u-icon name="zhuanfa" :size="40"></u-icon>
							<view class="text">分享</view>
						</view>
					</button>
					<button type="default" open-type="share" class="clearBtn" style="font-size: 14px;color:  #2979ff;">
						<view class="item" @click="clickItem(clerk.mobile)">
							<u-icon name="phone" :size="40"></u-icon>
							<view class="text">联系经纪人</view>
						</view>
					</button>

				</view>

				<u-back-top :scroll-top="scrollTop" top="1000"></u-back-top>

			</view>

		</view>


	</view>
</template>

<script>
	//import config from "@/common/config.js" // 全局配置文件
	import detailJson from "./detail.json"
	import {
		getClerkByUserId
	} from "@/api/store";
	import {
		findHouseRoomList
	} from "@/api/house";
	import {
		findHouseById,
		selectHouseEvals,
		selectHouseHeart,
		saveHeart
	} from "@/api/house.js";
	import storage from "@/utils/storage.js";
	import fangTemplate from '@/components/m-goods-list/fangList'

	export default {
		components: {
			fangTemplate
		},
		data() {
			return {
				scrollTop: 0,
				flowList: [],
				clerk: {},
				user: {},
				favorite: false,
				detailJson: this.detailJson,
				room: {
					villageName: '',
					houseNum: '',
					houseHall: '',
					toiletNum: '',
					roomType: '',
					direction: '',
					price: '',
					introduce: '',
					heart: false,
				},
				village: {
					year: '',
					type: '',
					green: '',
				},
				swiperlist: [],
				tagList: [],
				//评价列表
				evaluList: [],
				pageNumber: 1,
				pageSize: 10,
				longitude: 120.14,
				latitude: 30.35,
				distance: 0,
				//自己的评论
				ownevalu: '',
				houseId: null,
				evalsize: 0,
				havem: false,
				evaluate: '',
				credt: ''
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;

		},
		onLoad: function(option) {

			this.user = storage.getUserInfo()

			let houseId = option.houseId //上个页面传递的参数。
			this.houseId = houseId
			if (undefined != option.invitationCode) {
				uni.setStorageSync("invitationCode", this.invitationCode);
			}
			// 渲染当前房源信息
			this.findHouseById(houseId);
			this.findHouseRoomList();
		},
		methods: {
			heartHouse() {
        if (this.$options.filters.tipsToLogin()) {
          saveHeart({
            heart: this.favorite,
            houseId: this.room.id,
            userId: storage.getUserInfo().id
          }).then((result) => {

            //	this.room.heart = !this.room.heart
            // this.favorite=true;
            uni.showToast({
              title: result.data.msg,
              icon: 'none'
            })
            this.selectHouseHeart(this.houseId)
            //this.$mytip.toast(result..msg)
          });
        }

			},
			goHome() {
				uni.reLaunch({
					url: '/pages/tabbar/index'
				})
			},
			onPullDownRefresh() {
				this.pageNumber = 1;
				this.hasMore = true;
				this.findHouseRoomList();
				uni.stopPullDownRefresh();
			},
			onReachBottom() {
				if (this.hasMore) {
					this.pageNumber++;
					this.findHouseRoomList();
				}
			},
			findHouseRoomList() {
				findHouseRoomList({
					state: 2,
					villageCity: uni.getStorageSync("address").district,
					pageNumber: this.pageNumber,
					pageSize: this.pageSize,
					orderByColumn: 'update_time,create_time',
					type: 4,
					isAsc: 'desc'
				}).then(res => {
					if (res.statusCode == 200) {
						if (res.data.rows.length < this.pageSize) {
							this.hasMore = false;
						}
						if (this.pageNumber === 1) {
							this.flowList = res.data.rows;
						} else {
							this.flowList = this.flowList.concat(res.data.rows);
						}
					}
				})
			},
			openChat(id) {
        if (this.$options.filters.tipsToLogin()) {
          uni.navigateTo({
            url: `/pages/mine/im/index?userId=${id}&houseId=` + this.room.id
          });
        }

				// this.$options.filters.talkIm(id, '', '');

			},
			clickItem(agentPhone) {
        if (this.$options.filters.tipsToLogin()) {
          //拨打固定电话
          uni.makePhoneCall({
            phoneNumber: agentPhone,
          });
        }

			},
			findHouseById(houseId) {

				findHouseById({
					id: houseId
				}).then((result) => {
					let room = result.data.data;

					if (room.type == 0) {
						room.type = '整租'
					} else if (room.type == 1) {
						room.type = '合租'
					}
					if (room.roomType == 1) {
						room.roomType = '主卧'
					} else if (room.roomType == 2) {
						room.roomType = '次卧'
					} else {
						room.roomType = '未知'
					}

					if (this.$u.test.isEmpty(room.houseNum)) {
						room.houseNum = ''
					}
					if (this.$u.test.isEmpty(room.houseHall)) {
						room.houseHall = ''
					}
					if (this.$u.test.isEmpty(room.toiletNum)) {
						room.toiletNum = ''
					}
					if (this.$u.test.isEmpty(room.floor)) {
						room.floor = ''
					} else {
						room.floor = room.floor + '层'
					}

					this.swiperlist = room.imageList.map(val => {
						let imgUrl = val.imgUrl
						if (null != imgUrl) {
							return {
								title: '',
								image: imgUrl
							}
						}

					})


					this.tagList = room.featureList.map(val => {
						return {
							title: val.feature,
						}
					})
					// if(!room.agentAvatar.includes(config.staticUrl)){
					// 	room.agentAvatar = config.staticUrl+room.agentAvatar
					// }

					this.user = room.user
					this.village = room.village
					this.room = room
					// 判断是否收藏
					this.selectHouseHeart(houseId);
					//查询房源评价
					this.selectHouseEvals(houseId);

					getClerkByUserId(room.agentUserId).then((result) => {

						if (result.data.code == 200) {
							this.clerk = result.data.result
						}
					});

					// 分享自定义标题与图片
					let shareTitle = ''
					// if(room.type == '整租'){
					// 	shareTitle = this.village.name + " " + this.room.houseNum + this.room.houseHall + this.room.toiletNum + " " + this.room.decoration+ " ¥" + this.room.price+"/月"
					// }else{
					// 	shareTitle = this.village.name + " " + room.roomType + " " + this.room.decoration+  " ¥" + this.room.price+"/月"
					// }
					this.$u.mpShare = {
						title: shareTitle, // 默认为小程序名称，可自定义
						// 支持PNG及JPG，默认为当前页面的截图
						imageUrl: this.room.faceUrl,
					}

					// 添加到浏览历史
					let houseHistory = uni.getStorageSync('houseHistory')
					if (!houseHistory) {
						houseHistory = []
					}
					// 如果超过20个了，则删除最后一个
					if (houseHistory.length >= 20) {
						houseHistory.pop()
					}
					houseHistory.push(this.room)
					// 数据去重
					const keyArr = [];
					houseHistory.forEach((element, index) => {
						keyArr.push(element.code); // 通过code来判断
					});
					const newArr = [];
					const newKey = new Set(keyArr); // key去重
					newKey.forEach(item => {
						const index = keyArr.findIndex(item2 => item2 === item);
						newArr.push(houseHistory[index]);
					})
					uni.setStorageSync('houseHistory', newArr)

					// 经纬度
					this.longitude = room.longitude
					this.latitude = room.latitude
					// 计算距离
					let lat1 = 39.909
					let lng1 = 116.39742
					let lat2 = this.latitude
					let lng2 = this.longitude
					// uni.getLocation({
					// 	type: 'gcj02',
					// 	success: res=> {
					// 		lat1 = res.latitude
					// 		lng1 = res.longitude
					// 		this.distance = this.getDistance(lat1,lng1 ,lat2 , lng2);
					// 	}
					// })
				});
			},
			selectHouseHeart(houseId) {
				let that = this
				var vuex_user = storage.getUserInfo();
				if (vuex_user) {
					selectHouseHeart({
						houseId: houseId,
						userId: vuex_user.id,
					}).then((result) => {
						if (result.data.data) {
							that.favorite = true;
						} else {
							that.favorite = false
						}
						that.room.heart = result.data.data

					});
				}
			},
			selectHouseEvals(houseId) {

				// let url = "api/houseApi/selectHouseEvals";
				// this.$u.get(url, {
				// 	houseId: houseId,
				// 	pageNum: 1,
				// 	pageSize: 1
				// }).then(result => {
				selectHouseEvals({
					houseId: houseId,
					pageNum: 1,
					pageSize: 1
				}).then((result) => {
					if (result.data.total > 0) {
						this.evaluate = result.data.rows[0].evaluate;
						if (this.evaluate.length > 30) {
							this.evaluate = this.evaluate.substring(0, 30) + "......";
						}

						this.credt = result.data.rows[0].createTime;
						this.havem = true;
						this.evalsize = result.data.total;
					}
				});
			},
			goToIm(item) {
        if (this.$options.filters.tipsToLogin()) {
          uni.navigateTo({
            url: `/pages/mine/im/index?userId=${item.agentUserId}&houseId=` + item.id
          });

        }

				//this.$options.filters.talkIm(item.agentUserId, '', '')
			},
			// 新增分享函数
			onShareAppMessage() {
				console.info("新增分享函数")
				return {
					title: this.building.buildingName, // 分享标题
					path: `/pages/house/detail/detail?houseId=${this.houseId}` + "&invitationCode=" + this.user
						.id, // 自定义分享链接
					imageUrl: this.swiperlist[0].image // 分享图片
				};
			},
			moreEval() {
				this.$u.route({
					url: '/pages/house/detail/evalList',
					params: {
						houseId: this.houseId
					}
				})
			},
			clickImg(index) {
				let imgArr = this.swiperlist.map(val => {
					return val.image
				})
				console.log(imgArr);
				// 预览图片
				uni.previewImage({
					current: index,
					urls: imgArr
				});
			},
			clickMap(e) {
				uni.openLocation({
					longitude: Number(this.longitude),
					latitude: Number(this.latitude),
					name: this.room.villageName,
					address: this.room.address
				})
			},
			getDistance(lat1, lng1, lat2, lng2) {
				lat1 = lat1 || 0;
				lng1 = lng1 || 0;
				lat2 = lat2 || 0;
				lng2 = lng2 || 0;
				var rad1 = lat1 * Math.PI / 180.0;
				var rad2 = lat2 * Math.PI / 180.0;
				var a = rad1 - rad2;
				var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
				var r = 6378137;
				var distance = r * 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(rad1) * Math.cos(rad2) *
					Math.pow(Math.sin(b / 2), 2)));
				return (distance / 1000).toFixed(2);
			}
		}
	}
</script>

<style>
	/* page不能写带scope的style标签中，否则无效 */
	page {
		background-color: rgb(255, 255, 255);
	}
</style>


<style lang="scss" scoped>
	.body_count {
		background-color: rgb(245, 245, 245);
		height: auto;
		width: 100%;
		padding: 0 32rpx;
		position: relative;



		.count_box1 {
			background-color: #FFF;
			// border: 1px red solid;
			width: 100%;
			height: auto;
			border-radius: 18rpx;
			position: relative;
			top: -45px;
			padding: 20rpx;


			.box1_title {
				font-size: 32rpx;
				font-weight: 600;
			}

			.box1_detail {
				display: flex;
				align-items: center;
				// justify-content: flex-start;
				margin-top: 36rpx;

				.detail_item {
					// border: 1px red solid;
					margin-right: auto;
					white-space: nowrap;

					.font1 {
						font-size: 36rpx;
						font-weight: 600;
					}

					.font2 {
						font-size: 24rpx;
						font-weight: 400;
					}

					.font3 {
						font-size: 24rpx;
						font-weight: 400;
						color: rgba(11, 12, 15, 0.5);
					}
				}
			}

			.box1_icon {
				// border: 1px red solid;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				margin-top: 24rpx;

				.icon_item {
					background-color: rgb(237, 244, 255);
					color: rgb(88, 107, 144);
					font-size: 24rpx;
					padding: 4rpx 24rpx;
					margin-right: 16rpx;
					font-weight: 600;
				}
			}
		}


		.count_box2 {
			margin-top: 20rpx;

			.box2_title {
				font-size: 32rpx;
				font-weight: 900;
			}

			.box2_list {
				margin-top: 24rpx;
				width: 100%;


				.msg {
					display: flex;
					align-items: center;
					margin-bottom: 24rpx;
					// border: 1px red solid;
					width: 100%;

					.font1 {
						font-size: 28rpx;
						color: rgba(11, 12, 15, 0.5);
					}

					.font2 {
						font-size: 28rpx;
						color: rgb(11, 12, 15);
						margin-left: 40rpx;

						margin-left: auto;
					}
				}
			}
		}


	}


	map {
		width: 100%;
		height: 350rpx;
	}

	.item {
		padding: 25rpx;
		line-height: 80rpx;
		margin-top: -30rpx;
	}

	.item-title {
		font-size: 42rpx;
		color: $u-main-color;
		font-weight: bold;
	}

	.item-price {
		font-weight: normal;
		font-size: 45rpx;
		color: $u-type-warning;
	}

	.item-desc {
		font-weight: normal;
		font-size: 36rpx;
		color: $u-tips-color;
	}

	.arrow-right {
		position: absolute;
		top: 80rpx;
		right: 28rpx;
		font-weight: normal;
		font-size: 28rpx;
		color: $u-tips-color;

		.phone {
			width: 90rpx;
			height: 90rpx;
			border-radius: 100%;
			box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.1);
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.wayClass {
		color: #606266;
		padding: 30rpx;
		line-height: 50rpx;
	}

	.clearBtn {
		margin: 0;
		padding: 0;
		line-height: 1;
		background-color: #FFFFFF;
	}

	.clearBtn::after {
		position: unset !important;
		border: unset;
	}

	.navigation {
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 0rpx 15rpx;
		background-color: #ffffff;
		box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.05);
		z-index: 9999;

		.left {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 38rpx;
			font-size: 14px;
			color: #6a6a6a;

			.item {
				display: flex;

				.text {
					margin-left: 4rpx;
				}
			}
		}

		.right {
			display: flex;
			font-size: 28rpx;
			align-items: center;

			.btn {
				line-height: 66rpx;
				margin-left: 30rpx;
				padding: 5rpx 50rpx;
				color: #ffffff;
				border-radius: 36rpx;
				background-color: #2979ff;
			}
		}
	}

	.header {
		padding: 20rpx;
		border-radius: 10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
	}

	.more-info {
		font-size: 28rpx;
		color: #999;
	}


	.store-info {
		display: flex;
		align-items: center;
		// justify-content: space-between;
		background: #fff;
		margin-top: 24rpx;
		// padding: 40rpx 20rpx 50rpx;
	
		.logo {
			overflow: hidden;
			border-radius: 6px;
	
			>img {
				width: 100%;
				height: 100%;
			}
		}
	
		.name-star {
			// flex: 1;
			margin-left: 20rpx;
	
			.name {
				display: flex;
				align-items: center;
				width: 100%;
				line-height: 1;
				font-weight: 700;
				font-size: 28rpx;
			}
	
			.desc {
				font-size: 12px;
				color: #999;
				margin-left: 10px;
	
				text {
					margin-right: 10px;
				}
			}
		}
	
		.to-store-btn {
			display: flex;
			align-items: center;
			// height: 100%;
			margin-left: auto;
	
			>view {
				font-size: 28rpx;
				color: #fff;
				width: auto;
				height: auto;
				margin-left: 32rpx;
				// line-height: 60rpx;
				text-align: center;
				//background: $main-color;
				border-radius: 28rpx;
			}
		}
	}
	
	
	.title2 {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 60upx;
		color: #979797;
		font-size: 28upx;
	}
</style>